<%@ page language="java" pageEncoding="UTF-8"%>  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
    <head>  
  
        <title>grid</title>  
        <meta http-equiv="pragma" content="no-cache">  
        <meta http-equiv="cache-control" content="no-cache">  
        <meta http-equiv="expires" content="0">  
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
        <meta http-equiv="description" content="This is my page">  
        <link rel="stylesheet" type="text/css"  
            href="easyui-1.4/themes/default/easyui.css">  
        <link rel="stylesheet" type="text/css"  
            href="easyui-1.4/themes/icon.css">  
        <link rel="stylesheet" type="text/css" href="easyui-1.4/demo.css">  
        <script type="text/javascript" src="easyui-1.4/jquery.min.js"></script>  
        <script type="text/javascript" src="easyui-1.4/jquery.easyui.min.js"></script>  
        <script type="text/javascript"  
            src="easyui-1.4/locale/easyui-lang-zh_CN.js"></script>  
    </head>  
  
    <body>  
        <div class="easyui-layout" style="width: 100%; height: 100%;">  
  
  
            <div data-options="region:'north'" border="0"  
                style="height: 66px">  
  
                <table cellpadding="2">  
                    <tr>  
                        <td>User Name:</td>  
                        <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]',novalidate:true"></td>  
                      
                        <td>Email:</td>  
                        <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'email',novalidate:true"></td>  
                      
                        <td>Birthday:</td>  
                        <td><input class="easyui-datebox textbox" data-options="required:true,novalidate:true"></td>  
                    </tr>  
                    <tr>  
                        <td>Address:</td>  
                        <td><input class="easyui-validatebox textbox" data-options="required:true,novalidate:true"></td>  
                      
                        <td>Phone:</td>  
                        <td><input class="easyui-validatebox textbox" data-options="required:true,novalidate:true"></td>  
                    </tr>  
  
                </table>  
  
            </div>  
  
            <div data-options="region:'center'" border="0">  
  
                <table id="dg" class="easyui-datagrid" border="0"  
                    style="width: 100%; height: 100%"  
                    data-options="singleSelect:true,            fitColumns:true,  
                        url:'findPageEmp.action',           rownumbers:true,  
                        autoRowHeight:false,            pagination:true,  
                        pageSize:10,            toolbar:'#tb',          onClickRow: onClickRow">  
                    <thead>  
                        <tr>  
                            <th data-options="field:'username',width:100,editor:'textbox'">  
                                User Name  
                            </th>  
                            <th  
                                data-options="field:'usertype',width:100,editor:{type:'combobox'}">  
                                User Type  
                            </th>  
                            <th  
                                data-options="field:'email',width:100,editor:{type:'textbox'}">  
                                Email  
                            </th>  
                            <th  
                                data-options="field:'birthday',width:80,align:'right',editor:'datebox'">  
                                Birthday  
                            </th>  
                            <th  
                                data-options="field:'address',width:80,align:'right',editor:'textbox'">  
                                Address  
                            </th>  
                            <th data-options="field:'phone',width:250,editor:'textbox'">  
                                Phone  
                            </th>  
                        </tr>  
                    </thead>  
                </table>  
  
                <div id="tb">  
                    User Name:  
                    <input class="easyui-datebox" name="emp.username" style="width: 110px">  
                    User Type:  
                    <select class="easyui-combobox" panelHeight="auto"  
                        style="width: 100px">  
                        <option value="1">  
                            		线上  
                        </option>  
                        <option value="2">  
                         	   线下  
                        </option>  
                    </select>  
                    <a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>  
                </div>  
  
            </div>  
            <script type="text/javascript">  
            var editIndex = undefined;  
            function endEditing(){  
                if (editIndex == undefined){return true}  
                if ($('#dg').datagrid('validateRow', editIndex)){  
                    var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'usertype'});  
                    var productname = $(ed.target).combobox('getText');  
                    $('#dg').datagrid('getRows')[editIndex]['productname'] = productname;  
                    $('#dg').datagrid('endEdit', editIndex);  
                    editIndex = undefined;  
                    return true;  
                } else {  
                    return false;  
                }  
            }  
            function onClickRow(index){  
                if (editIndex != index){  
                    if (endEditing()){  
                        $('#dg').datagrid('selectRow', index)  
                                .datagrid('beginEdit', index);  
                        editIndex = index;  
                    } else {  
                        $('#dg').datagrid('selectRow', editIndex);  
                    }  
                }  
            }  
            function accept(){  
                if (endEditing()){  
                    $('#dg').datagrid('acceptChanges');  
                }  
            }  
            function reject(){  
                $('#dg').datagrid('rejectChanges');  
                editIndex = undefined;  
            }  
            function getChanges(){  
                var rows = $('#dg').datagrid('getChanges');  
                alert(rows.length+' rows are changed!');  
            }  
        </script>  
            <style scoped="scoped">  
.textbox {  
    height: 20px;  
    margin: 0;  
    padding: 0 2px;  
    box-sizing: content-box;  
}  
</style>  
    </body>  
</html> 